<template>
  <el-container>
    <!-- header -->
    <el-header 
      height="75px" 
      style="
        width: 100%;
        background-color: #eef1f6; 
        border-bottom: 1px solid #ccc; 
        display: flex; 
        align-items: center;
        justify-content: center;
        "
    >
      <TopHeader ref="topHeader" @user-click="userClick" v-model="formData" />
    </el-header>
    <!-- body -->
    <el-container>
      <!-- 左 -->
      <el-aside width="250px" class="left" style="margin: 0 0;">
        <LeftSidebar />
      </el-aside>
      <!-- 中 -->
      <el-main style="padding: 5px 5px;">
        <!-- 套一层div, 并绑定`drop`事件 -->
        <div class="dnd-flow" @drop="onDrop">
          <VueFlow
            :style="{ background: '#f5f5f5' }"
            v-model:nodes="nodes"
            v-model:edges="edges"
            fit-view-on-init
            :default-zoom="1.5"
            :min-zoom="0.2"
            :max-zoom="4"
            @dragover="onDragOver" 
            @dragleave="onDragLeave"
          >
            <!-- 背景 -->
            <DropzoneBackground
              :style="{
                backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
                transition: 'background-color 0.2s ease',
              }"
            >
              <p v-if="isDragOver" style="font-size: 25px; font-weight: 600;">
                松手放置节点
              </p>
            </DropzoneBackground>

            <!-- 小地图 -->
            <MiniMap />
            <!-- 控制栏 -->
            <Controls />

            <template #node-custom-input="nodeProps">
              <CustomStart v-bind="nodeProps" />
            </template>
            <template #node-custom-output="nodeProps">
              <CustomStop v-bind="nodeProps" />
            </template>
            <template #node-custom1="nodeProps">
              <CustomNode1 v-bind="nodeProps" />
            </template>
            <template #node-custom2="nodeProps">
              <CustomNode2 v-bind="nodeProps" />
            </template>
          </VueFlow>
        </div>
      </el-main>
      <!-- 右 -->
      <el-aside width="250px" class="right" style="margin: 0 0;">
        <RightSidebar v-model="selectedObj"/>
      </el-aside>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import { VueFlow, useVueFlow } from '@vue-flow/core'

import CustomStart from './CustomStart.vue'
import CustomStop from './CustomStop.vue'
import CustomNode1 from './CustomNode1.vue'
import CustomNode2 from './CustomNode2.vue'
import LeftSidebar from './LeftSidebar.vue'
import DropzoneBackground from './DropzoneBackground.vue'
import RightSidebar from './RightSidebar.vue'
import TopHeader from './TopHeader.vue'

import useDragAndDrop from './useDnD.js'
const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
const { onConnect, addEdges, onNodeClick, onEdgeClick } = useVueFlow()

import { addProcess } from "@/api/flow/process"

const { proxy } = getCurrentInstance()

// 节点和连接
const nodes = ref([
  {
    id: "start",
    type: "custom-input",
    label: "开始",
    position: {
      x: 85,
      y: 160
    },
    description: "开始",
	  data: { description: "开始" }
  },
  {
    id: "end",
    type: "custom-output",
    label: "结束",
    position: {
      x: 650,
      y: 160
    },
    description: "结束",
	  data: { description: "结束" }
  },
  {
    id: "AVG",
    type: "custom1",
    label: "AVG",
    position: {
      x: 200,
      y: 150
    },
    description: "AVG",
	  data: { description: "AVG" }
  },
  {
    id: "色谱",
    type: "custom1",
    label: "色谱",
    position: {
      x: 350,
      y: 150
    },
    description: "色谱",
	  data: { description: "色谱" }
  },
  {
    id: "机械臂",
    type: "custom2",
    label: "机械臂",
    position: {
      x: 500,
      y: 150
    },
    description: "机械臂",
	  data: { description: "机械臂" }
  }
])
const edges = ref([
  {
    id: "e: AVG->色谱",
    source: "AVG",
    target: "色谱",
    type: "step",
    label: "操作名称",
    animated: true,
    labelBgStyle: { fill: '#fff' },
    labelBgPadding: [8, 3],
    labelBgBorderRadius: 5,
    data: { description: '' }
  },
  {
    id: "e: start->AVG",
    source: "start",
    target: "AVG",
    type: "step",
    label: "操作名称",
    animated: true,
    labelBgStyle: { fill: '#fff' },
    labelBgPadding: [8, 3],
    labelBgBorderRadius: 5,
    data: { description: '' }
  },
  {
    id: "e: 机械臂->end",
    source: "机械臂",
    target: "end",
    type: "step",
    label: "操作名称",
    animated: true,
    labelBgStyle: { fill: '#fff' },
    labelBgPadding: [8, 3],
    labelBgBorderRadius: 5,
    data: { description: '' }
  },
  {
    id: "e: 色谱->机械臂",
    source: "色谱",
    target: "机械臂",
    type: "step",
    label: "操作名称",
    animated: true,
    labelBgStyle: { fill: '#fff' },
    labelBgPadding: [8, 3],
    labelBgBorderRadius: 5,
    data: { description: '' }
  }
])
// 当前选中的node或edge
const selectedObj = ref({})

// 头部表单组件
const topHeader = ref(null)
// 表单数据
const formData = ref({
  processName: '',
  remark: ''
})

// 节点连接时的回调函数
onConnect(params => {
  const { source, target } = params;
  addEdges([{
    id: `e: ${source}->${target}`,
    source,
    target,
    type: 'step',
    animated: true,
    label: '操作名称',
    data: {
      description: ''
    },
    labelBgStyle: { fill: '#fff' },
    labelBgPadding: [8, 3],
    labelBgBorderRadius: 5
  }])
})
// 点击节点时的回调函数
onNodeClick(e => {
  selectedObj.value = e.node
})
// 点击连接时的回调函数
onEdgeClick(e => {
  selectedObj.value = e.edge
})

/** 用户点击提交 */
function userClick () {
  // 组装数据
  nodes.value.forEach(n => {
    n['x'] = n.position.x
    n['y'] = n.position.y
    n['description'] = n.data.description
  })
  edges.value.forEach(e => {
    e['description'] = e.data.description
  })
  console.log({
    flowProcess: formData.value,
    flowNodeList: nodes.value,
    flowEdgeList: edges.value
  })
  // 发送请求
  addProcess({
    flowProcess: formData.value,
    flowNodeList: nodes.value,
    flowEdgeList: edges.value
  }).then(response => {
    proxy.$modal.msgSuccess("新增成功")
    topHeader.value.resetForm()
    nodes.value = []
    edges.value = []
  })
}

</script>

<style scoped lang="scss">
.left {
  border-right: 1px solid #ddd;
}
.right {
  border-left: 1px solid #ddd;
}
</style>